<template>
    <div>
        <el-form label-position="right"
                 label-width="100px"
                 :model="currentCheckedNode">
            <el-form-item label="路由选择"
                          required>
                <el-select v-model="currentCheckedNode.path"
                           placeholder="请选择路由"
                           style="width:100%;"
                           filterable
                           clearable
                           @change="changeRoute">
                    <el-option v-for="item in routersList"
                               :key="item.key"
                               :label="item.title"
                               :value="item.path"
                               :disabled="item.disabled">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="自定义地址"
                          required
                          v-if="currentCheckedNode.path === static_route_path[0]">
                <el-input v-model="currentCheckedNode.iframeSrc"
                          placeholder="请填写菜单地址"></el-input>
            </el-form-item>
            <el-form-item label="组件ID"
                          required
                          v-else-if="currentCheckedNode.path === static_route_path[1] || currentCheckedNode.path === static_route_path[2]">
                <el-input v-model="currentCheckedNode.iframeSrc"
                          placeholder="请填写组件页面ID"></el-input>
            </el-form-item>
            <el-form-item label="菜单名称"
                          required>
                <el-input v-model="currentCheckedNode.label"
                          placeholder="请填写菜单名称"></el-input>
            </el-form-item>
            <el-form-item label="菜单图标"
                          required>
                <el-input readonly
                          v-model="currentCheckedNode.icon"
                          class="custom-input-prefix"
                          placeholder="请选择菜单图标">
                    <template slot="suffix">
                        <i :class="currentCheckedNode.icon"></i>
                    </template>
                    <template slot="append">
                        <el-button icon="el-icon-setting"
                                   @click="dialogVisible=true"></el-button>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item size="large">
                <el-button type="primary"
                           @click="onSubmit">提交</el-button>
            </el-form-item>
        </el-form>
        <el-dialog title="请选择菜单图标"
                   :visible.sync="dialogVisible"
                   width="50%"
                   class="custom-dialog"
                   :close-on-click-modal="false"
                   append-to-body>
            <IconView @click-node="(icon) => {
                currentCheckedNode.icon = icon
                dialogVisible = false
            }" />
        </el-dialog>
    </div>
</template>
<script>
import { all_router_key, static_route_path } from "@/config/storage-keys";
import Storage from "@/utils/storage-manage";
import IconView from "./icon-view";
export default {
    components: {
        IconView,
    },
    props: {
        allPaths: {
            type: Array,
            default: function () {
                return [];
            },
        },
        currentCheckedNode: {
            type: Object,
            default: function () {
                return {};
            },
        },
    },
    data() {
        return {
            static_route_path: static_route_path,
            routersList: [],
            dialogVisible: false,
            formLabelAlign: {
                label: "",
                path: "",
                icon: "",
            },
        };
    },
    methods: {
        getRoutersList() {
            const list = Storage.getLocalStorage(all_router_key);
            const allPaths = this.allPaths.map((v) => v.path);
            const whiteRoutes = static_route_path;
            this.routersList = list.map((item) => {
                if (allPaths.indexOf(item.path) > -1) {
                    item.disabled = true;
                } else {
                    item.disabled = false;
                }
                if (whiteRoutes.indexOf(item.path) > -1) item.disabled = false;
                return item;
            });
        },
        changeRoute(key) {
            const curr = this.routersList.find((item) => item.path === key);
            this.currentCheckedNode.label = curr.title;
            console.log(this.currentCheckedNode.path);
        },
        onSubmit() {
            const currentCheckedNode = this.currentCheckedNode;
            const keys = static_route_path;
            if (!keys.includes(currentCheckedNode.path)) {
                delete currentCheckedNode.iframeSrc;
            }
            this.$emit("on-save", currentCheckedNode);
        },
    },
    created() {
        this.getRoutersList();
    },
};
</script>
<style lang="scss">
.custom-input-prefix {
    .el-input__prefix,
    .el-input__suffix {
        display: flex;
        align-items: center;
        font-size: 20px;
    }
}
</style>
